<template>
    <div class="order-list">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>行业分类：</label>
                <el-select
                    v-model="queryData.industryId"
                    placeholder="行业分类"
                    filterable
                    clearable
                    @change="choseSearchExam"
                >
                    <el-option
                        v-for="item in industryOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>所属考试：</label>
                <el-select
                    v-model="queryData.examId"
                    placeholder="考试"
                    filterable
                    clearable
                    reserve-keyword
                    @change="choseSearchPackage"
                >
                    <el-option
                        v-for="item in examOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>套餐：</label>
                <el-select v-model="queryData.packageId" placeholder="套餐" filterable clearable>
                    <el-option
                        v-for="item in packageOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>订单号：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.orderSn"
                        clearable
                        placeholder="订单号"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>手机号：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.mobile"
                        clearable
                        placeholder="手机号"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <label>订单状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.orderStatus"
                        filterable
                        clearable
                        placeholder="订单状态"
                    >
                        <el-option
                            v-for="key in Object.keys(orderStatus)"
                            :key="key"
                            :label="orderStatus[key]"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.paymentStatus"
                        filterable
                        clearable
                        placeholder="支付状态"
                    >
                        <el-option
                            v-for="key in Object.keys(paymentStatus)"
                            :key="key"
                            :label="paymentStatus[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付方式：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.paymentType"
                        filterable
                        clearable
                        placeholder="支付方式"
                    >
                        <el-option
                            v-for="key in Object.keys(paymentType)"
                            :key="key"
                            :label="paymentType[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付设备：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.deviceType"
                        filterable
                        clearable
                        placeholder="支付设备"
                    >
                        <el-option
                            v-for="key in Object.keys(deviceType)"
                            :key="key"
                            :label="deviceType[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>创建时间：</label>
                <el-date-picker
                    v-model="queryData.createdStartTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.createdEndTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <label>支付时间：</label>
                <el-date-picker
                    v-model="queryData.payStartTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.payEndTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="search()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch"
                >重置
                </el-button>
            </div>
        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column label="订单号" min-width="180" prop="id">
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    width="160"
                    prop="createdTime"
                >
                </el-table-column>
                <el-table-column
                    label="套餐"
                    min-width="120"
                    prop="packageName"
                >
                </el-table-column>
                <el-table-column
                    label="行业"
                    min-width="120"
                    prop="industryName"
                >
                </el-table-column>
                <el-table-column label="考试" min-width="120" prop="examName">
                </el-table-column>
                <el-table-column label="sku名" min-width="120" prop="skuName">
                </el-table-column>
                <el-table-column
                    label="用户"
                    min-width="120"
                    prop="master.name"
                >
                </el-table-column>
                <el-table-column label="订单金额" width="120" prop="price">
                    <template slot-scope="scope">
                        <p>{{ (scope.row.price / 100).toFixed(2) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="orderStatus[scope.row.orderStatus]"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="支付时间"
                    width="160"
                    prop="paymentModel.payTime"
                >
                </el-table-column>
                <el-table-column label="支付设备" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            v-if="
                                scope.row.paymentModel &&
                                    scope.row.paymentModel.deviceType && (scope.row.orderStatus==='success'||scope.row.orderStatus==='refundSuccess'||scope.row.orderStatus==='waitSign')
                            "
                            :tag="deviceType[scope.row.paymentModel.deviceType]"
                        ></k-tag>
                        <p v-else>-</p>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            v-if="scope.row.paymentModel && scope.row.paymentModel.paymentType && (scope.row.orderStatus==='success'||scope.row.orderStatus==='refundSuccess'||scope.row.orderStatus==='waitSign')"
                            :tag="
                                paymentType[scope.row.paymentModel.paymentType]
                            "
                        ></k-tag>
                        <p v-else>-</p>
                    </template>
                </el-table-column>
                <el-table-column label="分销人员" prop="recommendName" width="100">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-folder-opened"
                            :loading="scope.row.opLoading"
                            @click="clickDetail(scope.row)"
                        >详情
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit && scope.row.orderStatus==='success'|| scope.row.orderStatus==='waitSign'"
                            class="warning"
                            type="text"
                            size="mini"
                            icon="el-icon-warning"
                            :loading="scope.row.opLoading"
                            @click="clickRefund(scope.row)"
                        >退款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--  handleView-->

        <el-pagination
            :current-page="pageData.currentPage"
            :page-sizes="pageData.pageSizes"
            :page-size="pageData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>

import {get} from "@/api/request";
import {mapState} from "vuex";
import {TablePage} from "@/layout/mixin/iVue";

export default {
    name: "OrderList",
    mixins: [TablePage],
    data() {
        return {
            tableData: [
                // price type userId orderStatus recommendId recommendName
            ],
            pageData: {
                pageSizes: [10],
                currentPage: 1,
                total: 0,
                pageSize: 10
            },
            queryData: {
                examId: null,
                orderSn: null,
                columnType: null,
                orderStatus: null,
                paymentStatus: null,
                type: "onlineOrder",
                paymentType: null,
                deviceType: null,

                mobile: null,
                assetsName: null,
                orderTime: [],
                payTime: [],

                productDetail: true,
                orderMasterDetail: true,
                payment: true,
                orders: [
                    {
                        column: "created_time",
                        asc: false
                    }
                ]
            },
            tableLoading: false,
            packageOptions: [],
            industryOptions: [],
            examOptions: [],
        };
    },
    computed: {
        ...mapState({
            orderStatus: state => state.status.orderStatus,
            deviceType: state => state.status.deviceType,
            paymentType: state => state.status.paymentType,
            paymentStatus: state => state.status.paymentStatus,
            columnType: state => state.status.columnType
        }),
    },

    created() {
        // 混入里create调用了方法
        // this.search();
        this.getIndustryOptions()
    },
    methods: {
        search() {
            // search({
            //     current:this.currentPage,
            //     size:this.pageSize
            // }).then(res=>{
            //     this.total=res.total;
            //     this.tableData=res.records
            // })
            let {
                createdStartTime,
                createdEndTime,
                payStartTime,
                payEndTime
            } = this.queryData;
            createdStartTime = createdStartTime || null;
            createdEndTime = createdEndTime || null;
            payStartTime = payStartTime || null;
            payEndTime = payEndTime || null;

            this.loadTable(
                "/order/or/order/page",
                {
                    ...this.queryData,
                    type: "onlineOrder",
                    payTime: null,
                    orderTime: null,
                    createdStartTime:
                        createdStartTime !== null
                            ? createdStartTime.format("yyyy-MM-dd") +
                            " 00:00:00"
                            : null,
                    createdEndTime:
                        createdEndTime !== null
                            ? createdEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null,
                    payStartTime:
                        payStartTime !== null
                            ? payStartTime.format("yyyy-MM-dd") + " 00:00:00"
                            : null,
                    payEndTime:
                        payEndTime !== null
                            ? payEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null,
                    isDistribute:true
                },
                true,
                m => {
                    let nameArray = [];
                    for (let o of m.orderDetail) {
                        if (o.assets !== undefined && o.assets !== null) {
                            nameArray.push(o.assets.name)
                        }
                    }
                    m.skuName = nameArray.join(",")
                    m.oneDetail = m.orderDetail[0];
                    if (null !== m.oneDetail && m.oneDetail !== undefined) {
                        m.asset = m.oneDetail.assets;
                    }
                    return m;
                }
            );
            // this.countAmount();
        },
        resetSearch() {
            this.queryData = {...this.initQueryData};
        },

        handleView(row) {
            // console.log("查看订单:", row);
            // 这里可以跳转到订单详情页面或弹出订单详情对话框
        },
        handleSizeChange(val) {
            this.pageData.pageSize = val;
            // 根据新的pageSize重新获取数据
        },
        handleCurrentChange(val) {
            this.pageData.currentPage = val;
            // 根据新的currentPage重新获取数据
        },
        getIndustryOptions() {
            get("/exam/industry/app/list", {size: 1000}).then(res => {
                this.industryOptions = res;
            });
        },
        choseSearchExam() {
            this.queryData.examId = null;
            get("/exam/exam/exam-by-industryId-app", {
                industryId: this.queryData.industryId,
                size: 1000
            }).then(res => {
                this.examOptions = res;
            });
            if (this.queryData.industryId !== null && this.queryData.industryId !== "") {
                get("/exam/package/exam-by-industryId-app", {
                    industryId: this.queryData.industryId,
                    examId: this.queryData.examId
                }).then(res => {
                    this.packageOptions = res;
                });
            }

        },
        choseSearchPackage() {
            get("/exam/package/list", {
                industryId: this.queryData.industryId,
                examId: this.queryData.examId
            }).then(res => {
                this.packageOptions = res;
            });
        },
    }
};
</script>

<style scoped lang="scss">
.order-list {
    padding: 20px;
}
.table-search-box{
    background: white;
}
</style>
